<template>
    <div :style="'height: '+docheight+'px'">
      <div  class="textcontainer" v-if="!showTimeOut">
        <div class="textTop">消费记录</div>
        <div class="recordCont" ref="recordList">
          <div class="recordList">
            <div class="recordItem" :key="index" v-for="(item,index) in listArr">
              <div class="itemNum">订单编号:{{ item.bill_number }}</div>
              <div class="listUnder">
                <div class="itemPrice">
                  <div>订单金额</div>
                  <div class="backText" v-if="item.bill_type==2">
                    <span>+</span>
                    {{ item.bill_money }}
                    (退款)
                  </div>
                  <div class="payText" v-if="item.bill_type==1">
                    <span>-</span>
                    {{ item.bill_money }}
                    (消费)
                  </div>
                </div>
                <div class="itemTime">
                  <div>订单日期</div>
                  <div>{{ item.create_time }}</div>
                </div>
              </div>
            </div>
          </div>
          <is-down style="margin-top:0.5rem" v-if="last_page==page"></is-down>
          <div v-if="listArr.length==0" class="nodata">暂无消费记录~</div>
        </div>
        <div class="backbtn" style="background-color:#6455d4" @click="toback">返回列表</div>
    </div>
      <toast v-model="showToast" position="middle" width="50%" type="text" :time="1000">{{showText}}</toast>
      <getLoad v-if="!showCont"></getLoad>
      <getTimeOut v-if="showTimeOut"></getTimeOut>
    </div>
  </template>
  
  <script>
  
  import saveBtn from "@/components/public/saveBtn";
  import isDown from "@/components/public/isDown";
  import {Toast } from 'vux'
  import getLoad from '@/components/public/getLoad'
  import getTimeOut from '@/components/public/getTimeOut'
  import { Rechargerecord } from "@/http/api";
  export default {
    components: {getLoad,getTimeOut,Toast,isDown,saveBtn},
    data() {
      return {
        showTimeOut: false,
        showCont:false,
        showText:'',
        showToast:false,
        per_page:10,
        page:1,
        listArr:[],
        last_page:0,
        getting:false,
      }
    },
    props: {},
    methods: {
      toback(){
        this.$router.back()
      },
      getData(){
        let data = {
          per_page:this.per_page,
          page:this.page
        }
        Rechargerecord(data).then((res)=>{
          this.showCont= true
          if(res.data.code==1){
            if(res.data.data&&res.data.data.data&&res.data.data.data.length>0){
              let arr = res.data.data.data
              for(let i=0;i<arr.length;i++){
                this.listArr.push(arr[i])
              }
              setTimeout(() => {
                this.getting = false
              }, 100);
              this.last_page = res.data.data.last_page
            }
          }else{
            this.showToast = true
            this.showText = res.data.msg
          }
        }).catch(()=>{
            this.showTimeOut = true
            this.showCont= true
          })
      },
      nextfn(){
        if(this.$route.path=='/record'){
          let h = document.documentElement.scrollHeight||document.body.scrollHeight
          let wh = document.documentElement.clientHeight||document.body.clientHeight
          let top = document.documentElement.scrollTop||document.body.scrollTop
          let bottom = h-wh-top
          if(bottom<=50){
            if(this.getting==false){
              if(this.last_page>this.page){
                this.getting=  true
                this.page++
                this.getData()
              }
            }
          }
        }
      }
    },
    mounted() {
      this.$refs.recordList.addEventListener('scroll',this.nextfn)
    },
    created() {
      this.getData();
    },
  }
  </script>
  
  <style scoped lang="less">
  .textcontainer {
    width: 100%;
    height: 100%;
    background-color: #f7f8fa;
    padding-top: 0.75rem;
    box-sizing: border-box;
    padding-bottom: 0.75rem;
    display: flex;
    flex-direction: column;
    .textTop {
      width: 92%;
      margin: 0 4% 0;
      font-size: 0.9rem;
      box-sizing: border-box;
      font-weight: bold;
      text-align: center;
      border: 0.15rem solid black;
      border-radius: 0.5rem;
      background-color: #fff;
      padding: 0.75rem;
    }
    .recordCont{
      flex: 1;
      height: 5rem;
      overflow: auto;
      font-size: 0.7rem;
      width: 92%;
      margin: 0.75rem 4% 0;
      padding: 0.75rem;
      background-color: #fff;
      border: 0.15rem solid black;
      border-radius: 0.5rem;
      box-sizing: border-box;
      .recordList{
        width: 100%;
        background-color: #fff;
        padding: 0 4%;
        box-sizing: border-box;
        .recordItem{
          padding: 0.75rem 0;
          border-bottom: 1px dashed #ccc;
          line-height: 1rem;
          color: #666;
          .listUnder{
            display: flex;
            margin-top: 0.5rem;
            justify-content: space-between;
            .backText{
                color: #2fc717;;
            }
          }
        }
      }
      .nodata{
        color: #666;
        text-align: center;
        font-size: 0.6rem;
        margin-top: 1rem;
      }
    }
    .backbtn{
    width: 92%;
    margin: 0.75rem auto;
    color: white;
    text-align: center;
    height: 2.2rem;
    line-height: 2.2rem;
    border-radius: 0.25rem;
    font-size: 0.6rem;
    letter-spacing: 0.1rem;
  }
  }
  </style>
  